<template>
  <transition name="haloe-fade-in">
    <div v-if="visible" :style="backTopStyle" :class="classes" @click.stop="handleClick">
      <slot name="icon">
        <Icon size="30" type="backtop"></Icon>
      </slot>
    </div>
  </transition>
</template>

<script setup>
import Icon from '../icon'
import {computed} from "vue"

import {useBackTop} from "./use-backtop"

const props=defineProps({
  /**
   * @description the button will not show until the scroll height reaches this value.
   */
  visibilityHeight: {
    type: Number,
    default: 200,
  },
  /**
   * @description the target to trigger scroll.
   */
  target: {
    type: String,
    default: '',
  },
  /**
   * @description right distance.
   */
  right: {
    type: Number,
    default: 40,
  },
  /**
   * @description bottom distance.
   */
  bottom: {
    type: Number,
    default: 40,
  },
})

const emits=defineEmits(['cilck'])

const {handleClick,visible}=useBackTop(props,emits,'BackTop')

const backTopStyle = computed(() => ({
  right: `${props.right}px`,
  bottom: `${props.bottom}px`,
}))

const classes=computed(()=>{
  return [
    'haloe-backtop'
  ]
})

</script>

<style>
</style>